<template>
  <a-button type="primary" @click="addRow">添加</a-button>
  <!-- support from v2.25.0  -->
  <a-table :columns="columns" :data="data" style="margin-top: 20px">
    <template #name="{ record }">
      <a-input v-if="record.isEdit" v-model="record.name" />
      <template v-else>{{ record.name }}</template>
    </template>
    <template #salary="{ record }">
      <a-input v-if="record.isEdit" v-model="record.salary" />
      <template v-else>{{ record.salary }}</template>
    </template>
    <template #operate="{ record, rowIndex }">
      <template v-if="record.isEdit">
        <a-button type="text" @click="saveRow(record, rowIndex)">保存</a-button>
        <a-button type="text" @click="cancelRow(record, rowIndex)"
          >取消</a-button
        >
      </template>
      <template v-else>
        <a-button type="text" @click="editRow(record, rowIndex)">编辑</a-button>
        <a-button type="text" @click="deleteRow(record, rowIndex)"
          >删除</a-button
        >
      </template>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import { cloneDeep } from 'lodash';

  const columns = [
    {
      title: '密级',
      dataIndex: 'name',
      slotName: 'name',
    },
    {
      title: '机载软件名称',
      dataIndex: 'salary',
      slotName: 'salary',
    },
    {
      title: '机载软件版本',
      dataIndex: 'salary',
      slotName: 'salary',
    },
    {
      title: '机载软件安装时间',
      dataIndex: 'salary',
      slotName: 'salary',
    },
    {
      title: '机载软件安装单位',
      dataIndex: 'salary',
      slotName: 'salary',
    },
    {
      title: '项目',
      dataIndex: 'salary',
      slotName: 'salary',
    },
    {
      title: '第一次更改',
      dataIndex: 'salary',
      slotName: 'salary',
    },
    {
      title: '第二次更改',
      dataIndex: 'salary',
      slotName: 'salary',
    },
    {
      title: '第三次更改',
      dataIndex: 'salary',
      slotName: 'salary',
    },
    {
      title: '重要记事',
      dataIndex: 'salary',
      slotName: 'salary',
    },
    {
      title: '第一次更改后',
      dataIndex: 'salary',
      slotName: 'salary',
    },
    {
      title: '第二次更改后',
      dataIndex: 'salary',
      slotName: 'salary',
    },
    {
      title: '第三次更改后',
      dataIndex: 'salary',
      slotName: 'salary',
    },
    {
      title: '操作',
      dataIndex: 'operate',
      slotName: 'operate',
      fixed: 'right',
      width: 200,
    },
  ];
  const baseData = {
    key: '1',
    name: 'Jane Doe',
    salary: 23000,
    isEdit: false,
    address: '32 Park Road, London',
    province: 'Beijing',
    city: 'Haidian',
    email: 'jane.doe@example.com',
  };
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let editData = null;
  const data = reactive([]);
  const addRow = () => {
    data.push({
      ...baseData,
    });
  };
  const saveRow = (record) => {
    editData = null;
    record.isEdit = false;
  };
  const cancelRow = (record) => {
    Object.keys(editData).forEach((key) => {
      record[key] = editData[key];
    });
    record.isEdit = false;
  };
  const editRow = (record) => {
    editData = cloneDeep(record);
    record.isEdit = true;
  };
  const deleteRow = (record, rowIndex) => {
    data.splice(rowIndex, 1);
  };
</script>
